<template name="basics">
	<view>
		<scroll-view scroll-y class="page">
			<image
				src="https://cdn.nlark.com/yuque/0/2019/png/280374/1552996358228-assets/web-upload/e256b4ce-d9a4-488b-8da2-032747213982.png"
				mode="widthFix"
				class="response"
			></image>
			<view class="nav-list">
				<navigator
					hover-class="none"
					:url="'/pages/basics/' + item.name"
					class="nav-li"
					navigateTo
					:class="'bg-' + item.color"
					:style="[{ animation: 'show ' + ((index + 1) * 0.2 + 1) + 's 1' }]"
					v-for="(item, index) in menu"
					:key="index"
				>
					<view class="nav-title">{{ item.title }}</view>
					<view class="nav-name">{{ item.name }}</view>
					<text :class="'cuIcon-' + item.cuIcon"></text>
				</navigator>
			</view>
			<view class="cu-tabbar-height"></view>
		</scroll-view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	name: 'basics',
	data() {
		return {
			elements: [
				{
					title: '主子表',
					name: 'testData',
					color: 'cyan',
					cuIcon: 'form',
					roles: []
				},
				{
					title: '单表',
					name: 'simple',
					color: 'green',
					cuIcon: 'form',
					roles: []
				},
				{
					title: '高级查询',
					name: 'list',
					color: 'orange',
					cuIcon: 'list',
					roles: []
				},
				{
					title: '通讯录',
					name: 'phone',
					color: 'purple',
					cuIcon: 'addressbook',
					roles: []
				}
			]
		};
	},
	computed: {
		...mapState(['roles']),
		menu: function() {
			// 判断角色的交集
			let menuTemp = [];
			let currentRoles = new Set(this.roles);
			for (let i = 0; i < this.elements.length; i++) {
				let accessRoles = new Set(this.elements[i].roles);
				let intersectionSet = new Set([...currentRoles].filter(x => accessRoles.has(x)));
				if (intersectionSet.size > 0 || accessRoles.size == 0) {
					menuTemp.push(this.elements[i]);
				}
			}
			return menuTemp;
		}
	},
	onShow() {
		// console.log('success');
	},
	mounted() {}
};
</script>

<style>
.page {
	height: 100vh;
}
</style>
